<template>
	<div class="shopcar">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center bg-white">
			<div class="pr-3"></div>
			<div class="fs-xxl text-dark pl-3 ml-3" style="text-align: center;">
				清单
			</div>
			<div>
				<el-button type="text" @click="$router.push('/')">
					<div class="mr-3 fs-xxl text-dark"></div>
				</el-button>
			</div>
			
		</div>
		<!-- 商品列表区域 -->
		<div class="goods-list">
			<div class="dec" v-for="(item,i) in goodslist" :key="item.id"> 
				<div class="mui-card-content">
					<div class="d-flex ai-center py-1 px-2">
						<!-- 这个组件 需要用v-model 来修改 状况  true  flase--> 
						<el-checkbox class="checkbox pr-2" v-model="item.checkout" @change="selectChange(item.orderItem.skuId,item.checkout)">
						</el-checkbox>
						<van-image
						style="width: 85px; height: 85px; border-radius: 3%;"
						:src="item.orderItem.image"
						fit="cover">
					</van-image>						
					<div class="info flex-1 px-2">
						<div class="d-flex jc-between ai-center py-3">
							<div>{{item.orderItem.name}}</div>
							<div style="word-break: keep-all;" @click.prevent="del(item.orderItem.skuId,item.orderItem.num)">删除</div>
						</div>
						<div class="biaoqan">超值换购</div>
						<div class="d-flex jc-between ai-center">
							<span class="price text-pink fs-md">￥{{item.orderItem.price/100}}</span>
							<!-- 如何从购物车中获取商品的数量 -->
                                <!-- 先创建一个空数组 循环购物车所有商品的数据 每循环一次 把当前的id作为属性名
                                	当前的count 作为属性值 -->
                                	<numbox @getGoodsList="getGoodsList" :initcount="item.orderItem.num" :goodsid="item.orderItem.skuId"></numbox>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="goodslist.length == 0" class="bg-white text-c" style="height: 150px; padding-top: 100px;">
            	<div>
            		<img style="width: 150px;" src="https://img.ddky.com/c/wap/images/ddky2/onthing.png">
            	</div>
            	<div class="none text-grey pt-3 py-3">您还没有商品哦~ 快去选购吧！</div>
            </div>
            <!-- 商品结算区域 -->
            
            <div class="compute d-flex jc-between ai-center bg-white">

            	<div class="left">
            		<div class="text-pink fs-xl pl-2">总价:￥{{Mount/100}}</div>
            		<div class="pl-2 text-grey">金额:￥{{Mount/100}} 优惠:￥-0.00</div>
            	</div>
            	
            		<el-button @click="buyNow" type="danger">提交（{{Count}}）</el-button>
            	
            </div>
            <navFooter />
            
        </div>
    </template>

    <script>
    	import {Toast} from 'mint-ui'
    	import navFooter from "../../components/public/navFooter";
    	import numbox from "../../components/public/numbox";
    	export default {
    		data(){
    			return {
    				payMount: 0,
    				allCount: 0,
    				goodslist: [
    				],
    				url: '',
    				orderList: {
                        productList: [],
                        payMount: 0
    				},
    				Count: 0,
    				Mount: 0
    			}
    		},
    		created(){
            this.getGoodsList();
        },
        methods: {
			async getGoodsList(){
				this.$store.commit('showLoading')
                const res = await this.$http.get('cart/findCartList.do')
                if (res.status == 200) {
                	this.$store.commit('hideLoading')
                	this.goodslist = res.data
                	console.log(this.goodslist)
                	this.Mount = 0;
                	this.Count = 0;
                	// if (this.goodslist.length = 0) {
                	// 	this.payMount = 0
                	// }
                	res.data.forEach((item,i) => {
                		if (item.checkout == true) {
                			this.Mount = this.Mount+item.orderItem.payMoney;
                			this.Count = this.Count+item.orderItem.num;
                			
                		}
                		
                		this.$store.commit('setCount',this.Count)
                	})
                }else {
                	this.$store.commit('setCount',0)
                }
				
				// //获取 store中所有商品的id 然后拼接成一个字符串 作为id传过去 拿数据
				// var AllId = []
				// this.$store.state.car.forEach(item => AllId.push(item.id))
    //              console.log(AllId)
				// //如果没有id 则不请求数据
				// if (AllId.length <= 0) {
				// 	return
				// }
				// //获取数据   id,id,id
				// this.$http.get('api/goods/getshopcarlist/'+AllId.join(",")).then(result => {
    //                        if (result.body.status == 0) {
    //                        	this.goodslist = result.body.message
    //                        }
				// })
			},
			// id 用于删除store 里面的数据  index 用于删除goodslist 里面的数据
			async del(id,num){
				const res = await this.$http(`cart/addCart.do?skuId=${id}&num=${-num}`)
				if (res.data.code != 0) {

					this.$store.commit('deleteGoods',num)
					Toast('删除成功！')
					this.getGoodsList()
				}
			},
			//如果 选则 框 状态变 了 则调用该方法去 修改store里对应id 的 car 的状态
			async selectChange(id,val){
				const res = await this.$http.get(`cart/updateCheckout.do?skuId=${id}&checkout=${val}`)
				// this.$store.commit('getSelected',{id :id,selected: val})
				if (res.data.code == 1) {
					this.getGoodsList()
				}
			},
			buyNow() {

				this.goodslist.forEach((item,i) => {
					if (item && item.checkout) {
						console.log(item.orderItem)
						this.orderList.productList.push(item.orderItem);
						this.$set(this.orderList,'payMount',this.Mount)
					}
				})
						
				if (this.orderList.productList.length > 0) {
					this.$store.commit('setOrderAffirm', this.orderList);
					this.$router.push("/order");
				}else{
					Toast('您还没有商品哦')
				}
			},

		},
		components: {
			numbox,
			navFooter,
		}
	}
</script>

<style lang="scss">
.nav_top {
	position: sticky;
	top: 0;
	z-index: 99;
}
.biaoqan {
	width: 60px;
	border: 1px solid #f9245e;
	background-color: #fff;
	color:  #f9245e;
	border-radius: 5%;

}
.dec {
	border-bottom: 1px solid #eeee;
}
.el-checkbox__inner { 
	border: 1px solid #8d98ab !important; 
	width: 16px !important;
	height: 16px !important; 
	border-radius: 50% !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
	background-color: #fff !important;
	border-color: #f9245e !important;
	background: #f9245e !important;
}
.compute {
  position: fixed;
  left: 0;
  bottom: 4.25rem;
  z-index: 99;
  width: 100%;
  border-top: 1px solid #dedede;
  
}
.goods-list {
	padding-bottom: 7rem;
}
</style>